<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="query-card">
          <template #header>
            <div class="card-header">
              <span>智能问答</span>
              <el-button
                type="text"
                @click="navigateToKnowledge"
              >管理知识库</el-button>
            </div>
          </template>
          <div class="query-form">
            <el-input
              v-model="question"
              type="textarea"
              :rows="3"
              placeholder="请输入您的问题..."
              @keyup.enter.ctrl="submitQuery"
            ></el-input>
            <div class="query-actions">
              <el-button type="primary" @click="submitQuery" :loading="loading">提问</el-button>
              <el-button @click="clearQuery">清空</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-if="queryResults" class="results-section">
      <el-col :span="24">
        <el-card class="results-card">
          <template #header>
            <div class="card-header">
              <span>答案</span>
            </div>
          </template>
          <div class="answer">
            <p>{{ queryResults.answer }}</p>
          </div>
          <el-divider></el-divider>
          <div class="knowledge-context">
            <h4>参考知识：</h4>
            <el-tag 
              v-for="item in queryResults.retrieved_knowledge" 
              :key="item.id" 
              type="info" 
              effect="plain"
              class="knowledge-tag"
            >
              {{ item.text }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const store = useStore()
    const router = useRouter()
    const question = ref('')
    
    // 从store获取状态
    const loading = computed(() => store.state.loading)
    const queryResults = computed(() => store.state.queryResults)
    const error = computed(() => store.state.error)
    
    // 加载知识库
    onMounted(() => {
      store.dispatch('fetchKnowledgeBase')
    })
    
    // 提交查询
    const submitQuery = () => {
      if (!question.value.trim()) return
      
      store.dispatch('query', {
        question: question.value,
        topK: 3
      })
    }
    
    // 清空查询
    const clearQuery = () => {
      question.value = ''
      store.commit('setQueryResults', null)
    }
    
    // 导航到知识库管理
    const navigateToKnowledge = () => {
      router.push('/knowledge')
    }
    
    return {
      question,
      loading,
      queryResults,
      error,
      submitQuery,
      clearQuery,
      navigateToKnowledge
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.query-card, .results-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.query-form {
  display: flex;
  flex-direction: column;
}

.query-actions {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.results-section {
  margin-top: 20px;
}

.answer {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.knowledge-context {
  margin-top: 10px;
}

.knowledge-tag {
  margin: 5px 5px 5px 0;
}
</style> 